<template>
	<view class="content">
		<p class="title_b">欢迎来到东邦维修</p>
		<view class="login">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="username">
					<u-input v-model="form.username" border="bottom" placeholder="请输入登陆账号" placeholder-class="phcolor" clearable/>
				</u-form-item>
				<u-form-item prop="password">
					<u-input type="password" border="bottom" v-model="form.password" placeholder="请输入密码"
						placeholder-class="phcolor" clearable/>
				</u-form-item>
			</u-form>
			<view style="margin-top: 50rpx">
				<u-button @click="submit" type="primary">登 录</u-button>
				<view class="forgetPassword" @click="forgetPassWord">忘记密码？联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		clearStorageSync,
		setStorageSync,
		getStorageSync,
		useRouter
	} from '@/utils/utils.js';

	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入帐号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		methods: {
			submit() {
				const data = {
					username: this.form.username,
					password: this.form.password
				};
				this.$refs.uForm.validate().then(res => {
					this.$newapi.login(data).then((res) => {
							if (res.code == 200) {
								toast('登录成功！');
								setStorageSync('token', res.data);
								getApp().globalData.token = res.data;
								this.$newapi.getUserInfo().then((re) => {
									getApp().globalData.repairPhone = re.data.repairPhone;
									getApp().globalData.rworkerId = re.data.id;
									getApp().globalData.userName = re.data.userName;
									getApp().globalData.repairMemo = re.data.repairMemo;
									getApp().globalData.repairMajor = re.data.repairMajor;
									getApp().globalData.repairCompany = re.data.repairCompany;
									getApp().globalData.repairCity = re.data.repairCity;
									getApp().globalData.nickName = re.data.nickName;
									this.$nextTick(() => {
										useRouter('/pages/index/index', {}, 'switchTab');
									});
								});
							} else {
								toast(res.msg);
							}
						})
						.catch((err) => {
							toast(err);
						});
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					console.log(111);
				})
			},
			register() {
				useRouter('/pages/public/join');
			},
			forgetPassWord() {
				// useRouter('/pages/public/forget_password');
				uni.makePhoneCall({
					phoneNumber: '9667788'
					// phoneNumber: this.orderItem.phone
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		/* onShow() {
			this.form.username = uni.getStorageSync('username')
		} */
	};
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="scss" scoped>
	.phcolor {
		color: #222;
	}

	.content {
		box-sizing: border-box;
		padding-top: 220rpx;
		width: 100%;
		height: 100%;
		border-top: 1px solid #767dbc;
		background-image: url("https://i-blog.csdnimg.cn/direct/eadb4e0734df440398d72e34bbb13f37.jpeg");
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.title_b {
			margin: 0 40rpx 220rpx 20rpx;
			font-size: 40rpx
		}
	}

	.login {
		width: 60%;
		margin-left: 8%;

		::v-deep.u-input__input::placeholder {
			color: #343434 !important;
		}

		::v-deep.u-form-item__body__left__content__label {
			color: #343434 !important;
		}

		::v-deep.u-form-item__body__right__message {
			color: #343434 !important;
			margin-left: 10rpx !important;
		}

		::v-deep.u-input__content__field-wrapper__field {
			color: #343434 !important;
		}
	}

	.forgetPassword {
		padding: 30rpx 0 30rpx 0;
		color: #3057be;
		font-size: 24rpx;
	}

	@media (min-width: 768px) {
		::v-deep .u-button--primary {
			font-size: 20rpx !important;
			padding: 30rpx !important;
		}

		::v-deep .u-input {
			padding: 20rpx 10rpx !important;
		}

		::v-deep .u-input__content__field-wrapper__field {
			font-size: 20rpx !important;
		}

		.content {
			padding-top: 180rpx;
		}

		.title_b {
			margin-bottom: 120rpx !important;
		}
	}
</style>